<template>
<view>
	<MusicHeader title="网易云音乐" :icon="false" v-if="!islogin" />
	<view class="container">
		
		<scroll-view scroll-y="true">
			<view v-if="!islogin">
				<!-- login start -->
				<view class="login">
					<text class="loginimg"></text><text class="username"></text>
					<text class="enterlogin" @tap="handletoloding">
					登录/注册
					</text>
				</view>
				<!-- search start -->
				<view class="index-search" @tap="handletosearch()">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲">
				</view>
				<!-- 骨架屏 -->
				<view v-if="isLoding">
					<m-for-skeleton
							:title="false"
					        :avatarSize="200"
					        :row="3"
					        :loading="isLoding"
					        isarc="square"
					        v-for="(item,key) in 4"
							:titleStyle ="{}"
					        :key="key">
							
					</m-for-skeleton>
				</view>
				<view v-if="!isLoding">
					<!--  MusicList start-->
					<view class="index-list">
						<view class="index-list-item" v-for="(item,index) in topList" :key="index" @tap = "handletolist(item.listid)">
							
							<view class="index-list-Img">
								<image :src="item.coverImgUrl" mode=""></image>
								<text>{{item.updateFrequency}}</text>
							</view>
							<view class="index-list-text">
								<view v-for="(listitem,index) in item.tracks">{{index+1}}.{{listitem.first}}-{{listitem.second}}</view>
								
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view v-if="islogin">
				登陆页面
			</view>
			
		</scroll-view>
	</view>
</view>
</template>

<script>
	import '../../common/iconfont.css'
	import MusicHeader from "../../components/MusicHeader/MusicHeader.vue"
	import {topList} from '../../common/api.js'
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	export default {
		components:{MusicHeader,mForSkeleton},
		data() {
			return {
				topList:[],
				isLoding:true,
				islogin:false,
				
				
			}
			
		},
		onLoad() {
			topList().then((res)=>{
				if(res.length){
					// res.pop()
					this.topList = res;
					this.isLoding=false;
				}
			})
			this.Usermsg=this.$store.state.usermsg
			console.log(this.Usermsg);
		},
		
		methods: {
			handletolist(listid){
				uni.navigateTo({
					url:"../List/List?listid="+listid
				})
				
			},
			handletosearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			handletoloding(){
				uni.navigateTo({
					url:"../loding/loding"
				})
				this.Usermsg=this.$store.state.usermsg
			console.log(this.Usermsg);
			}
		}
		
	}
</script>

<style scoped>
.container{
	height: 80vh;
}
/* login */
	.login{
		width: 100%;
		height: 103rpx;
		position: relative;
		}
	.loginimg{
		display: inline-block;
		width: 65rpx;
		height: 65rpx;
		background-color: #007AFF;
		border-radius: 65rpx;
		position: absolute;
		top:25rpx;
		left: 33rpx;
	}
	.username{
		font-size:25rpx ;
		position: absolute;
		top: 40rpx;
		left: 118rpx;
	}
	.enterlogin{
		width: 141rpx;
		height: 64rpx;
		border-radius: 30rpx;
		border: 4rpx solid #f1f1f1;
		font-size: 25rpx;
		text-align: center;
		line-height: 64rpx;
		position: absolute;
		top: 20rpx;
		right:33rpx;
	}
	/* login end */
	/*search start */
	.index-search{
		display: flex;
		align-items: center;
		height: 78rpx;
		margin: 0 34rpx 34rpx 34rpx;
		background-color:#f7f7f7 ;
		border-radius: 30rpx;
	}
	.index-search text{
		margin-left:27rpx ;
		font-size: 45rpx;
	}
	.index-search input{
		margin-left:27rpx ;
		font-size: 32rpx;
	}
	/*search end */
	/* MusicList start */
	.index-list{
		margin: 10rpx 33rpx;
		}
	.index-list-item{
		display: flex;
		margin-bottom: 34rpx ;
		}
	.index-list-Img{
		width: 216rpx;
		height: 216rpx;
		border-radius: 10px;
		overflow: hidden;
		position:relative ;
		margin-bottom: 28rpx;
		margin-right: 22rpx;
		}
	.index-list-Img image{
		width: 100%;
		height: 100%;
		}
	.index-list-Img text{
		position: absolute;
		top: 185rpx;
		left: 18rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		}
	.index-list-text{
		font-size: 24rpx;
		line-height:72rpx;
	}
	.index-list-text view{
		width: 400rpx;
		font-size: 24rpx;
		line-height:72rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
